import React from "react";
import { Popover, Typography, List, Divider } from "antd";
// import { useProjects } from "server";
import styled from "@emotion/styled";
import { ButtonNoPadding } from "./lib";
import { useProjectModal } from "hooks/useProjectModal";

const ContentContainer = styled.div`
  min-width: 30rem;
`;

const ProjectPopover = () => {
  // const { data: projects } = useProjects();
  const { open } = useProjectModal();
  // const pinnedPeojects = projects?.filter(({ pin }) => pin);

  const content = (
    <ContentContainer>
      <Typography.Text type="secondary">收藏项目</Typography.Text>
      <List>
        {/* {pinnedPeojects?.map(({ name, id }) => (
          <List.Item key={id}>
            <List.Item.Meta title={name} />
          </List.Item>
        ))} */}
      </List>
      <Divider />
      <ButtonNoPadding type="link" onClick={open}>
        创建项目
      </ButtonNoPadding>
    </ContentContainer>
  );

  return (
    <Popover placement="bottom" content={content}>
      <span>项目</span>
    </Popover>
  );
};

export default ProjectPopover;
